<template>
    <div>
        <h3>说明:强制触发浅响应式的ref变量收集的依赖函数</h3>
    </div>
    <el-button @click="handleTriggerRef">+</el-button>
</template>

<script setup>
import { shallowRef, watchEffect, triggerRef } from "vue"

const shallow = shallowRef({
    greet: 'Hello, world'
})

// 触发该副作用第一次应该会打印 "Hello, world"
watchEffect(() => {
    console.log(shallow.value.greet)
})

const handleTriggerRef = () => {
    // 这次变更不应触发副作用，因为这个 ref 是浅层的
    shallow.value.greet = 'Hello, universe'

    // 打印 "Hello, universe"
    triggerRef(shallow)
}
</script>

<style lang="scss" scoped>
</style>